import {Routes, Route, useLocation, Outlet} from 'react-router-dom'
import Layout from 'components/Layout'
import Home from 'pages/Home'
import IconDemo from 'pages/demos/Icon'
import PostDetail from 'pages/Post/Detail'
import PostList from 'pages/Post/List'
import LottieDemo from 'pages/demos/Lottie'
import Counter from 'pages/demos/Counter'
import Timer from 'pages/demos/Timer'
import Demo from 'pages/demos'
import Anime from 'pages/demos/Effect/Anime'
import EffectDemo from 'pages/demos/Effect'
import ButtonDemo from 'pages/demos/Button'
import ModalDemo from 'pages/demos/Modal'
import RadioDemo from 'pages/demos/Radio'
import AutoCompleteDemo from 'pages/demos/AutoComplete'
import Performance from 'src/pages/demos/Performance'
import ImprativeHandle from 'src/pages/demos/useImperativeHandle'
import Context from 'src/pages/demos/useContext'
import SyncExternalStore from 'src/pages/demos/useSyncExternalStore'
import DeferredValue from 'src/pages/demos/useDeferredValue'
import Priority from 'src/pages/demos/Priority'
import Lazyload from 'src/pages/demos/LazyLoad'
import Tabs from 'src/pages/demos/Tabs'
import Cases from 'pages/Cases'
import I18n from 'pages/demos/i18n'

import './App.css';
import { useEffect, useRef, useState } from 'react'

function App() {
  const AppNavHeader = (
    <Layout>
      <Outlet />
    </Layout>
  )
  
  return (
    <Routes>
      <Route path='/' element={AppNavHeader}>
        <Route index element={<Home />} />
        <Route path='case' element={<Cases />}>
          <Route index element={<IconDemo />} />
          <Route path='button' element={<ButtonDemo />} />
          <Route path='radio' element={<RadioDemo />} />
          <Route path='modal' element={<ModalDemo />} />
          <Route path='autocomplete' element={<AutoCompleteDemo />} />

          <Route path='counter' element={<Counter />} />
          <Route path='timer' element={<Timer />} />
          <Route path='effect' element={<EffectDemo />}></Route>
          <Route path='performance' element={<Performance />}></Route>
          <Route path='anime' element={<Anime />}></Route>
          <Route path='lottie' element={<LottieDemo />} />
          <Route path='imprativeHandle' element={<ImprativeHandle />} />
          <Route path='useSyncExternalStore' element={<SyncExternalStore />} />
          <Route path='useDeferredValue' element={<DeferredValue />} />
          <Route path='context' element={<Context />} />
          <Route path='priority' element={<Priority />} />
          <Route path='lazyload' element={<Lazyload />} />
          <Route path='tabs' element={<Tabs />} />
          <Route path='i18n' element={<I18n />} />
        </Route>
        <Route path='a' element={<div>aaaa</div>} />
        <Route path='b' element={<div>bbbb</div>} />
        <Route path='c' element={<PostList />}>
          <Route path=':id' element={<PostDetail />} />
        </Route>
      </Route>
      <Route path='/demo' element={<Demo />}></Route>
    </Routes>
  );
}

export default App;
